<template>
	<a-modal :title="$t('Edit') + $t('User')" v-model='ucreate' @cancel='cancelhandle' width='40%' @ok='subnew'
		:cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
		<a-spin size="large"
			style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
			tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
		<a-form :form='form' class="modal">
			<a-form-item :label="$t('User') + $t('Name')" v-bind='formlayout' has-feedback>
				<a-input disabled v-decorator="['name', { initialValue: tarname.user_id }]"></a-input>
			</a-form-item>
			<!-- 昵称 -->
			<a-form-item :label="$t('Nickname')" v-bind='formlayout' has-feedback>
				<a-input v-decorator="['display_name', {
					rules: [
						{ required: true, message: $t('Enter') + $t('Nickname') },
						{ pattern: namePattern, message: $t('Not_enter_special_characters') }
					]
					, initialValue: tarname.display_name
				}]" :placeholder="$t('Enter') + $t('Nickname')" />
			</a-form-item>
			<!-- 邮箱地址 -->
			<a-form-item :label="$t('Email')" v-bind='formlayout' has-feedback>
				<a-auto-complete allowClear
					v-decorator="['email', { initialValue: tarname.email, rules: [{ required: false, message: $t('Enter') + 'Email' }, { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: $t('Enter_valid_email') }] }]"
					:dataSource="edata" style="width: 200px" @change="handleChange" placeholder="Email" />
			</a-form-item>
			<!-- 最大桶数量 -->
			<a-form-item :label="$t('Max-Buckets')" v-bind='formlayout' has-feedback>
				<a-input v-decorator="['max_buckets', {
					rules: [
						{ required: true, message: $t('Enter') + $t('Max-Buckets') },
						{ pattern: /^(1|[1-9]\d{0,3})$/, message: $t('Please-en-1-9999') }
					], initialValue: tarname.max_buckets
				}]" style="width: 100%;" />
			</a-form-item>
			<!-- 用户状态 -->
			<a-form-item :label="$t('User') + $t('Status')" v-bind='formlayout'>
				<a-checkbox
					v-decorator="['suspended', { valuePropName: 'checked', initialValue: tarname.suspended === 0 ? false : true }]"
					style="padding-right:2em;width:100%">{{ $t('Whether-to-enable') }}</a-checkbox>
			</a-form-item>
			<!-- 用户配额 -->
			<a-form-item :label="$t('User') + $t('Quota')" v-bind='formlayout' has-feedback>
				<a-checkbox style="width:100%" @change="onChangeuser"
					:checked="tarname.user_quota ? tarname.user_quota.enabled : false">{{ $t('Active') }}</a-checkbox>
				<p v-if="tarname.user_quota ? tarname.user_quota.enabled : '' == true">
					<a-checkbox @change="onChangeusers" :checked="activesize">{{ $t('Set-max-space') }}</a-checkbox>
					<a-checkbox @change="onChangeusero" :checked="activeobj">{{ $t('Set-max-obj') }}</a-checkbox>
				</p>
				<a-row>
					<!-- 最大空间限制 -->
					<a-col :span='16'>
						<a-form-item :label="$t('Max-space')" has-feedback style="margin-bottom: 0;"
							v-if="activesize == true && tarname.user_quota ? tarname.user_quota.enabled : '' == true">
							<!-- <a-input-number :min='1' style="width:100%" v-decorator="['user.size.value',{
											rules:[{required:true,message:$t('Enter')+$t('Max-space')}],
																initialValue:oldsize
										}]" :placeholder="$t('E-g')+'512'">
							</a-input-number> -->
							<a-input style="width:100%" v-decorator="['user.size.value', {
								rules: [
									{ required: true, message: $t('Enter') + $t('Max-space') },
									{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt2') }],
								initialValue: oldsize
							}]" :placeholder="$t('E-g') + '512'" />
						</a-form-item>
					</a-col>
					<a-col :span='8'>
						<a-form-item :label="$t('Unit')" has-feedback style="margin-bottom: 0;"
							v-if="activesize == true && tarname.user_quota ? tarname.user_quota.enabled : '' == true">
							<a-select v-decorator="['user.size.unit', {
								rules: [{ required: true, message: $t('Choose') + $t('Unit') }],
								initialValue: oldunit == '' ? undefined : oldunit
							}]" :placeholder="$t('Choose') + $t('Unit')">
								<a-select-option v-for='u in uint ' :key='u.val'>{{ u.label }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<!-- 最大对象数 -->
				<a-form-item :label="$t('Max-obj')" has-feedback
					v-if="activeobj == true && tarname.user_quota ? tarname.user_quota.enabled : '' == true">
					<!-- <a-input-number :min='1' style="width:100%" v-decorator="['user.objs',{
								rules:[{required:true,message:$t('Enter')+$t('Max-obj')}],
								initialValue:tarname.user_quota.max_objects}]" :placeholder="$t('E-g')+'100'">
					</a-input-number> -->
					<a-input style="width:100%" v-decorator="['user.objs', {
						rules: [
							{ required: true, message: $t('Enter') + $t('Max-obj') },
							{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt') }
						],
						initialValue: tarname.user_quota.max_objects
					}]" :placeholder="$t('E-g') + '100'" />
				</a-form-item>
			</a-form-item>
			<!-- 桶配额 -->
			<a-form-item :label="$t('Bucket') + $t('Quota')" v-bind='formlayout' has-feedback>
				<a-checkbox style="width:100%" @change="onChangebuk"
					:checked="tarname.bucket_quota ? tarname.bucket_quota.enabled : false">{{ $t('Active') }}</a-checkbox>
				<p v-if="tarname.bucket_quota ? tarname.bucket_quota.enabled : '' == true">
					<a-checkbox @change="onChangebuks" :checked="activebuks">{{ $t('Set-max-space') }}</a-checkbox>
					<a-checkbox @change="onChangebuko" :checked="activebuko">{{ $t('Set-max-obj') }}</a-checkbox>
				</p>
				<a-row>
					<!-- 最大空间限制 -->
					<a-col :span='16'>
						<a-form-item :label="$t('Max-space')" has-feedback style="margin-bottom: 0;"
							v-if="activebuks == true && tarname.bucket_quota ? tarname.bucket_quota.enabled : '' == true">
							<!-- <a-input-number :min='1' style="width:100%" v-decorator="['bucket.size.value',{
											rules:[{required:true,message:$t('Enter')+$t('Max-space')}]
											,initialValue:bukoldsize}]" :placeholder="$t('E-g')+'512'">
							</a-input-number> -->
							<a-input style="width:100%" v-decorator="['bucket.size.value', {
								rules: [{ required: true, message: $t('Enter') + $t('Max-space') },
								{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt2') }]
								, initialValue: bukoldsize
							}]" :placeholder="$t('E-g') + '512'">
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span='8'>
						<a-form-item :label="$t('Unit')" has-feedback
							v-if="activebuks == true && tarname.bucket_quota ? tarname.bucket_quota.enabled : '' == true">
							<a-select v-decorator="['bucket.size.unit', {
								rules: [{ required: true, message: $t('Choose') + $t('Unit') }]
								, initialValue: bukoldunit == '' ? undefined : bukoldunit
							}]" :placeholder="$t('Choose') + $t('Unit')">
								<a-select-option v-for='u in uint ' :key='u.val'>{{ u.label }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<!-- 最大对象数 -->
				<a-form-item :label="$t('Max-obj')" has-feedback
					v-if="activebuko == true && tarname.bucket_quota ? tarname.bucket_quota.enabled : '' == true">
					<!-- <a-input-number :min='1' style="width:100%" v-decorator="['bucket.objs',{
							rules:[{required:true,message:$t('Enter')+$t('Max-obj')}]
							,initialValue:tarname.bucket_quota.max_objects}]" :placeholder="$t('E-g')+'100'">
				</a-input-number> -->
					<a-input :min='1' style="width:100%" v-decorator="['bucket.objs', {
						rules: [
							{ required: true, message: $t('Enter') + $t('Max-obj') },
							{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt') }
						]
						, initialValue: tarname.bucket_quota.max_objects
					}]" :placeholder="$t('E-g') + '100'">
					</a-input>
				</a-form-item>
			</a-form-item>
			<!--存储区域-->
			<!-- <a-form-item :label="$t('Storage-area')" v-bind="formlayout">
                注释<a-radio-group @change="onChange" v-model="tab" disabled>
					<a-radio :value="1">默认</a-radio>
					<a-radio :value="2">自定义</a-radio>
				</a-radio-group>
                <div>
                	<a-select disabled v-if="tab==1" v-decorator="['placement',{
	                    rules:[{required:true,message:$t('Choose')+$t('Storage-area')}],
						initialValue:tarname.placement
	                }]" :placeholder="$t('Choose')+$t('Storage-area')">
						注释<a-select-option :value="item.id" v-for="item in $store.state.basebucket.zone">{{item.id}}</a-select-option>
                	</a-select>
                	<ul v-if="tarname.placement==areadata.id">
                		<li><span class="slist">{{$t('Area')}}ID:</span>{{areadata.id}}</li>
                		<li><span class="slist">{{$t('Data-pool')}}:</span>{{areadata.data_pool}}</li>
                		<li><span class="slist">{{$t('Index-pool')}}:</span>{{areadata.index_pool}}</li>
                		<li><span class="slist">{{$t('Extra-pool')}}:</span>{{areadata.data_extra_pool}}</li>
                		<li><span class="slist">{{$t('Compress')}}:</span>{{areadata.is_compression == true?$t('Yes'):$t('No')}}</li>
                	</ul>
					注释<a-select v-if="tab==2" v-decorator="['placement2',{
	                    rules:[{required:true,message:'请选择存储区域'}],
						initialValue:areadata.id
	                }]"  placeholder='请选择存储区域'>
						<a-select-option :value="item.id" v-for="item in $store.state.basebucket.zone">{{item.id}}</a-select-option>
                	</a-select>
                </div>
            </a-form-item> -->
		</a-form>
	</a-modal>
</template>

<script>
import request from '@/request/request'

export default {
	props: ['ee', 'tarname', 'areadata'],
	data() {
		return {
			form: this.$form.createForm(this),
			formlayout: {
				labelCol: { span: 5 },
				wrapperCol: { span: 17 }
			},
			ucreate: false,
			tab: 1,
			// value:1,
			auto: false,
			auto3: true,
			activesize: '',
			activeobj: '',
			activebuks: '',
			activebuko: '',
			oldunit: '',
			oldsize: '',
			bukoldunit: '',
			bukoldsize: '',
			edata: [],
			spinning: false,
			uint: [{ val: 'KiB', label: 'KiB' }, { val: 'MiB', label: 'MiB' }, { val: 'GiB', label: 'GiB' }, { val: 'TiB', label: 'TiB' }],
		}
	},
	watch: {
		ee(val) {
			this.ucreate = val
			this.part()
		},
		tarname(val) {
			if (val.user_quota.max_size !== -1) {
				this.activesize = true
			}
			if (val.user_quota.max_objects !== '') {
				this.activeobj = true
			}
			if (val.bucket_quota.max_size !== -1) {
				this.activebuks = true
			}
			if (val.bucket_quota.max_objects !== '') {
				this.activebuko = true
			}
		}
	},
	methods: {
		onChange(e) {
			if (e.target.value == 1) {
				this.tab = 1
			} else if (e.target.value == 2) {
				this.tab = 2
			}
			if (e.target.checked) {
				this.auto = false
			} else {
				this.auto = true
			}
		},
		// onChangekey (e) {
		// 	this.auto = !this.auto
		// },
		onChangeuser(e) {
			this.tarname.user_quota.enabled = !this.tarname.user_quota.enabled
			if (!this.tarname.user_quota.enabled) {
				this.activesize = false
				this.activeobj = false
			}
			// if(e.target.checked == true){
			// 	this.tarname.user_quota.enabled = true
			// 	this.activesize = true
			// 	this.activeobj = true
			// }else{
			// 	this.tarname.user_quota.enabled = false
			// 	this.activesize = false
			// 	this.activeobj = false
			// }
		},
		onChangeusers(e) {
			this.activesize = !this.activesize
			// if(e.target.checked == true){
			// 	  this.activesize = true
			// }else{
			// 	  this.activesize = false
			// }
		},
		onChangeusero(e) {
			this.activeobj = !this.activeobj
			// if(e.target.checked == true){
			// 	this.activeobj = true
			// }else{
			// 	this.activeobj = false
			// }
		},
		onChangebuk(e) {
			this.tarname.bucket_quota.enabled = !this.tarname.bucket_quota.enabled
			if (!this.tarname.bucket_quota.enabled) {
				this.activebuks = false
				this.activebuko = false
			}
			// if(e.target.checked == true){
			// 	this.tarname.bucket_quota.enabled = true
			// 	this.activebuks = true
			// 	this.activebuko = true
			// }else{
			// 	this.tarname.bucket_quota.enabled = false
			// 	this.activebuks = false
			// 	this.activebuko = false
			// }
		},
		onChangebuks(e) {
			this.activebuks = !this.activebuks
			// if(e.target.checked == true){
			// 	this.activebuks = true
			// }else{
			// 	this.activebuks = false
			// }
		},
		onChangebuko(e) {
			this.activebuko = !this.activebuko
			// if(e.target.checked == true){
			// 	this.activebuko = true
			// }else{
			// 	this.activebuko = false
			// }
		},
		cancelhandle(e) {
			this.form.resetFields();
			// this.osdcreate=false
			this.spinning = false
			// this.tab = 1
			this.$emit('omodal', false, true)
		},
		subnew(e) {
			e.preventDefault();
			this.form.validateFields((err, value) => {
				if (!err) {
					this.spinning = true
					// if(this.tab == 2){//存储区域的功能
					// 	value.placement = value.placement2
					// }
					// this.$axios.put(this.allurl+'rgw/user',value).then(res=>{
					request('post', 'rgw/user/update', value).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.form.resetFields();
						this.spinning = false
						// this.ucreate=false
						// this.tab = 1
						this.$emit('omodal', false, false)
					}).catch(err => {
						this.form.resetFields();
						this.spinning = false;
						this.$emit('omodal', false, false);
					})
				}
			})
		},
		handleChange(value) {
			this.edata = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@gmail.com`,
				`${value}@163.com`,
				`${value}@qq.com`,
			];
		},
		part() { //对容量进行 数值 和 单位的划分
			if (this.tarname.user_quota.max_size !== -1) {
				this.change = this.tarname
				this.oldsize = Number(this.bytesToSize(this.change.user_quota.max_size).split(' ')[0]).toFixed(0)
				this.oldunit = this.bytesToSize(this.change.user_quota.max_size).split(' ')[1]
			}
			else {
				this.oldsize = ''
				this.oldunit = ''
				this.activesize = false
			}
			if (this.tarname.user_quota.max_objects !== -1) {
				this.activeobj = true
			} else {
				this.activeobj = false
				this.tarname.user_quota.max_objects = ''
			}

			if (this.tarname.bucket_quota.max_size !== -1) {
				this.change = this.tarname
				this.bukoldsize = Number(this.bytesToSize(this.change.bucket_quota.max_size).split(' ')[0]).toFixed(0)
				this.bukoldunit = this.bytesToSize(this.change.bucket_quota.max_size).split(' ')[1]
			}
			else {
				this.bukoldsize = ''
				this.bukoldunit = ''
				this.activebuks = false
			}
			if (this.tarname.bucket_quota.max_objects !== -1) {
				this.activebuko = true
			} else {
				this.tarname.bucket_quota.max_objects = ''
				this.activebuko = false
			}
		}
	}
}
</script>

<style scoped>
.ant-select {
	width: 100% !important;
}

.client {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap
}

.subtn {
	margin-right: 1em;
	margin-top: 0.3em;
}

.add {
	overflow: hidden;
	border: 3px solid #e6f4ff;
	padding-top: 1em;
}

.ant-form-item-label {
	/*width: 35% !important;*/
}

.modal {
	height: 600px;
	overflow-y: auto;
	padding-right: 1em;
}</style>
